<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 100%;
			height: 1536px;
			background-color: aqua;
		}
		.tupian{
			padding-top: 1000px;
		}
	</style>
	<body>
		<div class="container">
		<img data-src="https://picsum.photos/360/440?random=9" src="./jiazai.png"  class="lazyload tupian" alt="">
		</div>
		<script type="text/javascript">
			window.addEventListener('scroll',_loadImage);
				
			function _loadImage(){
				 var imgList = document.querySelectorAll(".lazyload");
				 for (var i = 0; i < imgList.length; i++) {
				 		var el = imgList[i];
				 		if (_isToShow(el)) {
				 			var imgUrl = el.getAttribute("data-src");
				 			el.setAttribute("src", imgUrl);
				 			el.className = el.className.replace("lazyload", "loaded");
				 		}
				 	};
			}
			
			function _isToShow(el) {
				var coords = el.getBoundingClientRect();
				var wHeight = window.innerHeight || document.documentElement.clientHeight;
				return (coords.top >= 0 && coords.left >= 0 && coords.top <= wHeight);
			};
		</script>
	</body>
</html>
